<template>
  <div class="form-page">
    <base-title title="基础信息" />
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="form.courseName" placeholder="请输入课件名称" />
      </el-form-item>
      <el-form-item label="课程封面" prop="courseLogo">
        <el-button type="primary" size="mini" @click="selectPic"
          >选择图片</el-button
        >
        <el-image class="course-pic" :src="form.courseLogo">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </el-form-item>
      <el-form-item label="课程描述" prop="introduce">
        <el-input
          v-model="form.introduce"
          type="textarea"
          :rows="3"
          placeholder="请输入课件描述"
        />
      </el-form-item>
    </el-form>
    <form-btn @cancel="$emit('cancel')" @confirm="confirm" />
    <recourse-selector
      v-if="recourseVisible"
      :onlyPic="true"
      @close="recourseVisible = false"
      @confirm="getReSource"
    ></recourse-selector>
  </div>
</template>

<script>
import { AddCourse, EditCourse } from "@/api/course/course.js";
export default {
  name: "AddCourse",
  props: {
    activeData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      recourseVisible: false,
      url: "",
      form: {
        categoryId: "1248247537039085570",
        coursePrice: 0, // 价格
        isPutaway: 1, // 是否上架
        lectureId: "1064776676173942786",
        lectureName: "领课",
        rulingPrice: 0, // 原价
        speedDouble: 1,
        speedDrag: 1,
        // 实际参数
        courseName: "", // 名称
        introduce: "", // 描述
        courseLogo: "", // 图片
      },
      rules: {
        courseName: [
          { required: true, message: "课程名称不能为空", trigger: "blur" },
        ],
        introduce: [
          { required: true, message: "课程描述不能为空", trigger: "blur" },
        ],
        courseLogo: [
          { required: true, message: "课程图片不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    selectPic() {
      this.recourseVisible = true;
    },
    async confirm() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const api = this.form.id ? EditCourse : AddCourse;
          api(this.form).then((res) => {
            if (res.code === 200) {
              this.$message.success("添加成功");
              this.$emit("refresh");
            }
          });
        }
      });
    },
    getReSource(val) {
      this.form.courseLogo = val.resourceUrl;
      this.recourseVisible = false;
    },
  },
  created() {
    if (this.activeData.id) {
      const { id, courseLogo, courseName, introduce } = this.activeData;
      this.form.courseLogo = courseLogo;
      this.form.courseName = courseName;
      this.form.introduce = introduce;
      this.$set(this.form, "id", id);
    }
  },
};
</script>

<style lang="scss" scoped>
@import url("../../../assets/styles/form-page.scss");
.course-pic {
  height: 170px;
  width: 300px;
  margin-top: 10px;
}
.img-icon {
  font-size: 30px;
  color: #909399;
}
</style>
<style>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #909399;
  height: 100%;
  width: 100%;
  background-color: #f5f7fa;
  font-size: 28px;
}
</style>